<template>
  <view class="zk_input">
    <input
      v-model.trim="value"
      :value="iptvalue"
      @change="handleChange"
      @input="handleInput"
      :type="inpType"
      :placeholder="placeholder"
      :placeholder-style="placeholderStyle" />
    <view v-if="clearable && value" class="icon" @tap.stop="handleClear">
      <uni-icons type="close" color="#E4E4E4" size="24" />
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps({
  placeholder: {
    type: String,
    default: "请输入",
  },
  placeholderStyle: {
    type: String,
    default: "font-size: 14px;color: #CCCCD3;",
  },
  inpType: {
    type: String,
    default: "text",
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  iptvalue: {
    type: String,
    default: "",
  },
});
const value = ref(""); // 输入框的值
const emit = defineEmits(["handleInput", "handleChange", "update:value"]);
const handleInput = (e: any) => {
  emit("update:value", value.value);
  emit("handleInput", e.target.value);
};
const handleChange = (e: any) => {
  emit("update:value", value.value);
  emit("handleChange", e.target.value);
};
const handleClear = () => {
  value.value = "";
  emit("update:value", value.value);
};
</script>

<style lang="scss" scoped>
.zk_input {
  position: relative;
  .icon {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transform: translateY(-50%);
  }
  input {
    box-sizing: border-box;
    border: 1px solid rgb(228, 228, 228);
    border-radius: 6px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
  }
}
</style>
